<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="郭嘉碧">
    <title></title>
    <style>
      *{
          box-sizing: border-box;
      }
      body{
          margin: 0;
          padding: 0;
      }
      nav{
          width: 100%;
          height: 50px;
          background-color: #10C55B;
          display: flex;
          justify-content: space-between;
      }
      nav .up{
          width: 1200px;
          margin: 0 auto;
          display: flex;
          justify-content: space-between;
      }
      .left{
          width: 450px;
          height: 50px;
          display: flex;
          justify-content: space-between;
           font-size: 17px; 
      }
      .left a{
          display: block;
          width: 90px;
          height: 50px;
          color: white;
          line-height: 50px;
          text-align: center;
          text-decoration: none;
      }
      .right{
          width: 300px;
          height: 50px;
          display: flex;
          justify-content: space-between;
      }
      .right a{
          display: block;
          width: 80px;
          height: 50px;
          color: white;
          font-size: 17px;
          text-align: center;
          line-height: 50px;
          text-decoration: none;
      }
      .left .one{
          background-color: #01AC48;
      }
      section{
          width: 100%;
          height: 125px;       
      }
     .two{
         width: 1200px;
         height: 125px;
         margin: 0 auto;
         display: flex;
         justify-content: space-around;
     } 
     .three{
         width: 170px;
         height: 120px;
         background-image: url('QQ.png');
         background-repeat: no-repeat;    
     }
     .four{
         width: 900px;
         height: 125px;
         margin: 0 auto;
     }
     .five{
         padding: 0;
         width: 800px;
         height: 50px;
         margin-top: 20px;
         border: 1px solid #CCCCCC;
         border-radius: 8px;
         display: flex;
         justify-content: space-between;
     }
      .six{
         width: 90px;
         font-size: 15px;
         line-height: 45px;
         text-align: center;
     }
     input{
         width: 630px;
         height: 50px;
         margin: 0;
     }
     button{
         margin: 0;
         width: 80px;
         height: 50px;
         background-color: #17E56C;
         color: white;
         font-size: 20px;
         border-radius: 8px;
     }
     .four ul {
         width: 600px;
         height: 20px;
         list-style: none; 
         display: flex;
         justify-content: space-between;
         margin: 5px -40px;
     }
     .four ul li{
         font-size: 13px;
     }
     .four ul li a {
         text-decoration: none;
         color: black;
     } 
     
    .box ul{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    img{
        width: 100%;
        height: 320px;
    }
    .box{
        width: 100%;
        height: 320px;
        /* margin: 100px auto; */
        position: relative;
    }
    .img-list li{
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
    }
    .img-list li.current{
        display: block;
    }
    .indicator{
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 20px;
        display: flex;
        justify-content: center;
        color: white;
    }
    .indicator li{
        width: 20px;
        height: 20px;
        background-color: #aaa;
        text-align: center;
        line-height: 20px;
        margin: 0 5px;
        border-radius: 50%;
        cursor: pointer;
    }
    .indicator li.active{
        background-color: red;
    }
    .img-click span{
        width: 30px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: white;
        background-color: rgba(0, 0, 0, 0.1);
        position: absolute;
        top: calc(50% - 20px);
        display: none;
    }
    .img-click span:hover{
        background-color: orange;
        cursor: pointer;
    }
    .img-click .prev{
        left: 0;
    }
    .img-click .next{
        right: 0;
    }
    </style>
</head>
<body>
<nav>
    <div class="up">
        <div class="left">
            <a href="" class="one">首页</a>
            <a href="">所有分类</a>
            <a href="">设计创意</a>
            <a href="">办公创意</a>
            <a href="">· · ·</a>
        </div>
        <div class="right">
            <a href="">VIP中心</a>
            <a href="">请登录</a>
            <a href="">免费注册</a>
        </div>
    </div>
</nav>
<section>
    <div class="two">
       <div class="three"></div>
       <div class="four">
           <div class="five">
               <div class="six">全站</div><input type="" name="" value=""><button type="">搜索</button>
           </div>

            <ul>
               <li><a href="">热门搜索:</a></li>
               <li><a href="">七夕</a></li>
               <li><a href="">详情页</a></li>
               <li><a href="">icon</a></li>
               <li><a href="">主图</a></li>
               <li><a href="">秋季</a></li>
               <li><a href="">PPT模版</a></li>
               <li><a href="">EXCEL模板</a></li>
               <li><a href="">首页</a></li>
               <li><a href="">个人简历</a></li>
               <li><a href="">装饰图</a></li>
           </ul> 
        </div> 
    </div>
</section>

     <main class="box">
        <ul class="img-list">
            <li class="current"><a href="#"><img src="img/01.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/02.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/03.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/04.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/05.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/06.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/07.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/08.jpg" alt=""></a></li>
        </ul>
        <ul class="indicator">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="img-click">
            <span class="prev">&lt;</span>
            <span class="next">&gt;</span>
        </div>
     </div>
     </main>
</body>
</html>
<script>
    window.onload = function(){
    var box = document.querySelector('.box');
    var imgLis = document.querySelectorAll('.img-list li');
    var indicatorLis = document.querySelectorAll('.indicator li');
    var prev = document.querySelector('.prev');
    var next = document.querySelector('.next');
   
    var index = 0
    function prevImg() {
        index = index==0 ? index=imgLis.length-1 : index-1;
        showImg();
    }
    function nextImg() {
        index = index==imgLis.length-1 ? 0 : index+1;
        showImg();
    }
    function showImg(){
        for(var i = 0; i < imgLis.length; i++){
            imgLis[i].className = '';
            indicatorLis[i].className = '';
        }
        console.log(index);
        imgLis[index].className = 'current';
        indicatorLis[index].className = 'active';
    }
    var timer = setInterval(nextImg,1000);
    for(var i = 0; i < indicatorLis.length; i++){
        indicatorLis[i].index = i;
        indicatorLis[i].onclick = function(){

            clearInterval(timer);
            timer = null;
            index = this.index;
            showImg();
        }
        indicatorLis[i].onmouseout = function(){  
            if(timer) return;

            timer = setInterval(nextImg,1000);
        }
    }
    box.onmouseover = function(){
        clearInterval(timer);
        timer = null;
        prev.style.display = 'block';
        next.style.display = 'block';
    }
    box.onmouseout = function(){
        if(timer) return;
        timer = setInterval(nextImg,1000);
        prev.style.display = 'none';
        next.style.display = 'none';
    }

    prev.onclick = function(){
        prevImg();
    }

    next.onclick = function(){
        nextImg();
    }
}
</script>